<template>
  <div class="ringdiv" style="width: 180px;height: 180px;">
    <div :id="'container' + ringid" style="height: 100%;width: 100%;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import reslist from "../../json/position.js";
import chartmixins from "../../chartmixins.js";

export default {
  props: ["ringid", "data"],
  mixins: [chartmixins],
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  mounted() {
    var dom = document.getElementById("container" + this.ringid);
    var myChart = echarts.init(dom, "dark");
    var app = {};
    var rad = _.random(70, 100);
    let option = null;
    option = {
      backgroundColor: "#5555",
      color: ["#129C4F", "#FB4748"],
      title: {
        text: this.data.name,
        textStyle: {
          fontSize: 14
        },
        top: 20,
        left: 20
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)"
      },
      legend: {
        orient: "horizontal",
        // x: "left",
        bottom: 5,
        itemWidth: 10,
        itemHeight: 10,
        // data: ['通信正常', '通信异常'],
        formatter: function(name) {
          if (name != "通信正常") {
            return name + "\n    " + (100 - rad) + "%";
          } else {
            return name + "\n    " + rad + "%";
          }
        }
      },
      series: [
        {
          name: "占比",
          type: "pie",
          radius: ["30%", "40%"],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: "center"
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: "12",
                fontWeight: "bold"
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [
            { value: rad, name: "通信正常" },
            { value: 100 - rad, name: "通信异常" }
          ]
        }
      ]
    };

    myChart.setOption(option, true);

    this.myChart = myChart;

    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  methods: {}
};
</script>
<style lang='scss' scoped>
.ringdiv{
  // margin: 20px;
}
</style>